﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">栏目</label>
                <div class="layui-input-inline" style="width:450px;"> <input id="channelcascader" name="ParentId"/></div>
                 <div class="layui-form-mid layui-word-aux">下级栏目的字段默认继承上级栏目的字段，设置字段时请先选择合适的栏目</div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="tablestyle-table" lay-filter="tablestyle-table"></table>
    </div>
</div>

<script type="text/html" id="tablestyle-toolbar">
    @{await Html.RenderPartialAsync("_ToolbarAuthTpl", new SystemFunctionModel
        {
            MenuKey = SysMenuConstant.MENU_CMS_SETTING_NRZDSZ,
            FunDictionary = new Dictionary<string, string> { { "Add", "新增" } }
        });
    }
</script>

<script type="text/html" id="tablestyle-bar">
    @{
       await Html.RenderPartialAsync("_OperationTpl", new SystemFunctionModel
        {
            MenuKey = SysMenuConstant.MENU_CMS_SETTING_NRZDSZ,
            FunDictionary = new Dictionary<string, string> { { "Update", "编辑" }, { "Delete", "删除" } }
        });
    }
</script>

@section scripts{

    <script>
        layui.use(['table', 'form', 'lscom','layCascader'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let lscom = layui.lscom;
            let layCascader = layui.layCascader;
            let MODULE_PATH = "/Cms/Tablestyle/";
            var istoolbar = $.trim($("#tablestyle-bar").html())=="" ? true : false;
            let cols = [
                [
                {
                    title: '排序',
                    field: 'taxis',
                    align: 'left',
                    width: 80
                },
                {
                    title: '字段名',
                    field: 'attributeName',
                    align: 'left',
                    width: 120
                },
                {
                    title: '显示名称',
                    field: 'displayName',
                    align: 'left',
                    width: 120
                },
                {
                    title: '提交类型',
                    field: 'inputType',
                    align: 'left',
                    width: 150
                },
                {
                    title: '验证规则',
                    field: 'inputType',
                    align: 'left',
                    templet:function(d){
                        var  extenddata =JSON.parse(d.extendValues);
                        var html='无验证';
                        if(extenddata.RuleValues!=""){
                            var rulejson =JSON.parse(extenddata.RuleValues);
                            var ruleitems=[];
                            $.each(rulejson,function(k,v){
                              ruleitems.push(v.message);
                           });
                           html =ruleitems.join(';');
                        }
                        return '<span style="color: #00b19d;cursor: pointer;" lay-event="attributerule">'+html+'</span>';
                    }
                },
                {
                    title: '操作',
                    templet: '#tablestyle-bar',
                    align: 'center',
                    width: 150,
                    hide:istoolbar
                }
                ]
            ];

            let  channelcascader;
            lscom.ajax({
                url: "/Cms/Channel/GetChannleCascader?channelId=0",
                type:'GET',
                lsHandleError: false
            }).done(function(data) {
                if (data.code == 0) {
                  channelcascader=  layCascader({
                        elem: '#channelcascader',
                        options: data.data,
                        clearable: true,
                        props: {
                            checkStrictly: true
                        }
                    });
                    channelcascader.changeEvent(function (value, node) {
                         console.log('value:' + value + ',Node:' + JSON.stringify(node.data));

                          table.reload('tablestyle-table', {
                               where: {"channelId":value}
                         });
                    });
                }
            }).fail(function(message) {
                lscom.notify.error(message);
            });
           
            table.render({
                elem: '#tablestyle-table',
                url: MODULE_PATH + "GetList",
                //page: true,
                cols: cols,
                skin: 'line',
                height: 'full-148',
                toolbar: '#tablestyle-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });
           
            table.on('tool(tablestyle-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'Delete') {
                    window.remove(data.id);
                } else if (obj.event === 'Update') {
                    window.edit(data.id);
                }else if(obj.event === "attributerule"){
                    console.log(obj.event);
                    window.attributerule(data.id);
                }
            });

            table.on('toolbar(tablestyle-table)', function (obj) {
                if (obj.event === 'Add') {
                    var id=$('#channelcascader').val();
                     if (id=="" || id=="0") {
                        parent.layer.msg("请选择栏目", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    window.add(id);
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'Delete') {

                    let checkData = table.checkStatus(obj.config.id).data;
                    if (checkData.length === 0) {
                        parent.layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    var ids = checkData.map(function (d) { return d.id; });
                    window.remove(ids.join(','));
                }
            });

            form.on('submit(tablestyle-query)', function (data) {
                table.reload('tablestyle-table', {
                    where: data.field
                })
                return false;
            });
            window.attributerule =function(id){
                parent.layer.open({
                    type: 2,
                    title: '设置验证规则',
                    shade: 0.1,
                    area: ['900px', '650px'],
                    content: MODULE_PATH + 'Rule'+ lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }
            window.add = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '新增内容字段',
                    shade: 0.1,
                    area: ['900px', '650px'],
                    content: MODULE_PATH + 'Create'+ lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }
            window.edit = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '修改内容字段',
                    shade: 0.1,
                    area: ['900px', '650px'],
                    content: MODULE_PATH + 'Edit' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.remove = function (data) {
                parent.layer.confirm('确定删除吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    parent.layer.close(index);
                    let waitIndex = parent.layer.load(2);
                    lscom.ajax({
                        url: MODULE_PATH + 'Delete',
                        data: JSON.stringify({ "ids": data }),
                        lsHandleError: false
                    }).done(function (data) {
                        if (data.code == 0) {
                            lscom.notify.success(data.message);
                            table.reload('tablestyle-table');
                        }
                    }).fail(function (message) {
                        lscom.notify.error(message);
                    }).always(function () {
                        parent.layer.close(waitIndex);
                    });
                });
            }
            window.saveCallback = function (data) {
                parent.layer.close(data.index);
                lscom.notify.success(data.message);
                table.reload('tablestyle-table');
            }
            window.refresh = function () {
                table.reload('tablestyle-table');
            }
        });
    </script>

}
